<template>
  <div class="container">
    <category-list :categoryList="categoryData" v-model="categoryId"></category-list>
    <v-infinite-list :items="blogList" :item-height="40" #default="{sliceItem}">
        <u-list 
            :blogList="sliceItem"
            class="ulist"
        ></u-list>
    </v-infinite-list>
   
    <div v-intersect="{handler: getMoreBlog}" class="x-bottom">
        {{loadingTip}}
    </div>
  </div>
</template>

<script>
import UList from "./UList.vue"
import CategoryList from "./CategoryList"
import VInfiniteList from "@/components/VInfiniteList"
import { createNamespacedHelpers } from "vuex"
const { mapState, mapActions } = createNamespacedHelpers("blog")
const categoryVuex = createNamespacedHelpers("category")
let _this;
export default {
    components: {UList, CategoryList, VInfiniteList},
    data() { 
        return { 
            curPage: 1,
            categoryId: 0,
        }
    },
     watch: {
        "$store.state.blog.keyword"(newValue, oldValue) {
            this.curPage = 1
            this.getBlogData()
            setTimeout(() => {
                 if (this.hasMore) {
                    this.getMoreBlog()
                 }
            },50)
        },
        categoryId(newValue, oldValue) {
            this.curPage = 1
            this.getBlogData()
             setTimeout(() => {
                 if (this.hasMore) {
                    this.getMoreBlog()
                 }
            },50)
        }
     },
    computed: {
        ...categoryVuex.mapState({
            categoryData: state => {
                let data = state.categoryList;
                data.unshift({
                    id: 0,
                    name: '全部',
                })
                return data;
            }
        }),

        ...mapState({
            blogList: state => {
                var list = state.blogList;
                if (_this.categoryData.length > 0) {
                    list.forEach(item => {
                        let target = _this.categoryData.find(i => {
                            return i.id === item.category_id;
                        })
                        _this.$set(item,"categoryName",target?.name)
                    })
                    return list
                } else {
                    return list
                }
            },
            blogPage: state => state.blogPage,
            keyword: state => state.keyword
        }),
        loadingTip() {
            if (this.hasMore) {
                return '加载中,请稍等。。。'
            } else {
                return '没有更多数据了。。'
            }
        },
        hasMore() {
            return this.blogList.length < this.blogPage.total
        }

    },
    methods: {
        ...mapActions({
            handlerGetBlogData: "get_blog_data"
        }),
        ...categoryVuex.mapActions({
            handlerGetCategoryData: "get_category_list"
        }),
        getBlogData() {
            this.handlerGetBlogData({page: this.curPage, keyWord: this.keyword, categoryId: this.categoryId})
        },
        getMoreBlog() {
            if (this.hasMore) {
                this.curPage++
                this.handlerGetBlogData({
                    page: this.curPage, 
                    keyWord: this.keyword, 
                    categoryId: this.categoryId, 
                    isInterserct: true
                })
            }
        }
    },
    created() {
        _this = this
        this.handlerGetBlogData()
        this.handlerGetCategoryData()
    }

}
</script>

<style lang="scss" scoped>
.container {
    background-color: #fff;
    .x-bottom {
        height: 50px;
        width: 100%;
        text-align: center;
        color: rgb(170, 170, 170);
        background-color: #f5f9f9;
    }
}

</style>